<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>学生</title>
    <script>
      //页面一加载，判断有无token（是否登录了）
      if(localStorage.getItem('user-token') === null){
        //页面跳转到登录页
        location.href = 'login.html'
      }
    </script>
    <link rel="stylesheet" href="./bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="./bootstrap/bootstrap-icons.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/student.css" />
  </head>
  <body class="application application-offset">
    <div class="container-fluid container-application">
      <div class="sidenav show" id="sidenav-main">
        <!-- Sidenav header -->
        <div class="sidenav-header d-flex align-items-center">
          <a class="navbar-brand" href="./index.html">
            <span class="logo">·ITCAST·</span>
          </a>
        </div>
        <!-- User mini profile -->
        <div class="sidenav-user d-flex flex-column align-items-center justify-content-between text-center">
          <!-- Avatar -->
          <div>
            <a href="#" class="avatar rounded-circle avatar-xl">
              <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" class="" />
            </a>
            <div class="mt-5">
              <h5 class="mb-0 text-white">黑马前端</h5>
              <span class="d-block text-sm text-white opacity-8 mb-3">数据可视化</span>
              <a href="javascript:;" class="btn btn-sm btn-white btn-icon rounded-pill shadow hover-translate-y-n3">
                <span class="btn-inner--text">学前端来黑马</span>
              </a>
            </div>
          </div>
        </div>
        <!-- Application nav -->
        <div class="nav-application clearfix">
          <a href="./index.html" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-house bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">首页</span>
          </a>
          <a href="./student.html" class="btn btn-square text-sm active">
            <span class="btn-inner--icon d-block"><i class="bi bi-people bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">学生</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-columns bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">排版</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-files bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">资料</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-receipt bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">就业</span>
          </a>
          <a href="javascript:;" class="btn btn-square text-sm">
            <span class="btn-inner--icon d-block"><i class="bi bi-gear bi-2x"></i></span>
            <span class="btn-inner--icon d-block pt-2">设置</span>
          </a>
        </div>
        <!-- Misc area -->
        <div class="card bg-gradient-warning">
          <div class="card-body">
            <h5 class="text-white">哈喽, 朋友!</h5>
            <p class="text-white mb-4">为什么不现在开始学习前端，创造一些令人惊叹的东西呢？</p>
            <a href="http://itcast.cn" class="btn btn-sm btn-block btn-white rounded-pill" target="_blank">Get started</a>
          </div>
        </div>
      </div>
      <div class="main-content position-relative">
        <nav class="navbar navbar-main navbar-expand-lg navbar-dark navbar-border" id="navbar-main">
          <div class="container-fluid">
            <!-- Navbar nav -->
            <div class="collapse navbar-collapse navbar-collapse-fade" id="navbar-main-collapse">
              <ul class="navbar-nav align-items-lg-center">
                <!-- Home  -->
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 首页 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 传智教育 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 黑马程序员 </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" href="./index.html"> 文档 </a>
                </li>
              </ul>
              <!-- Right menu -->
              <ul class="navbar-nav ml-lg-auto align-items-center d-none d-lg-flex">
                <li class="nav-item dropdown dropdown-animate">
                  <a class="nav-link pr-lg-0" href=".dropdown-menu" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <div class="media media-pill align-items-center">
                      <span class="avatar rounded-circle">
                        <img alt="Image placeholder" src="https://yanxuan-item.nosdn.127.net/8b27deb1670c53e67c42ca3e1ed6fd12.jpg" />
                      </span>
                      <div class="ml-2 d-none d-lg-block">
                        <span class="mb-0 text-sm font-weight-bold">Admin</span>
                      </div>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link pl-lg-0" id="logout" href="javascript:;"> 退出 </a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="page-content">
          <div class="page-title mb-3">
            <div class="row justify-content-between align-items-center">
              <div class="col-md-6 mb-3 mb-md-0">
                <h5 class="h3 font-weight-400 mb-0 text-white">Students</h5>
                <span class="text-sm text-white opacity-8">一共有 <b class="total">0</b> 位学员</span>
              </div>
              <div class="col-md-6 d-flex align-items-center justify-content-between justify-content-md-end">
                <a id="openModal" href="javascript:;" class="btn btn-sm btn-white btn-icon-only rounded-circle ml-4">
                  <span class="btn-inner--icon"><i class="bi bi-plus bi-2x"></i></span>
                </a>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col">
              <div class="card card-fluid">
                <div class="table-responsive" style="min-height: 1000px">
                  <table class="table align-items-center">
                    <thead>
                      <tr>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>组号</th>
                        <th>期望薪资</th>
                        <th>就业薪资</th>
                        <th>籍贯</th>
                        <th>操作</th>
                      </tr>
                    </thead>
                    <tbody class="list">

                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <!-- footer -->
          <div class="footer pt-5 pb-4 footer-light" id="footer-main">
            <div class="row text-center text-sm-left align-items-sm-center">
              <div class="col-sm-6">
                <p class="text-sm mb-0">© 2022 <a href="https://itcast.cn" class="h6 text-sm" target="_blank">前端学科</a>. All rights reserved.</p>
              </div>
              <div class="col-sm-6 mb-md-0">
                <ul class="nav justify-content-center justify-content-md-end">
                  <li class="nav-item">
                    <a class="nav-link" href="#">Support</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Terms</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link pr-0" href="#">Privacy</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- add Modal -->
    <!-- 
      设计：添加学员和编辑学员共用同一个模态框盒子
      问题：单击"确认"按钮时，怎么知道当前是添加还是编辑功能？
      规划：
      给模态框盒子设置自定义属性data-id，根据属性值来判断是添加还是编辑
      如果单击+号，弹出来模态框，给模态框盒子设置data-id为‘add’<div id ="modal" data-id = 'add'></div>
      如果点击编辑，弹出模态框，给模态框盒子设置data-id为学生的id<div id = "modal" data-id = '11111'></div>

     -->
    <div class="modal fade" id="modal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">添加/编辑学员</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="form" class="g-3 row" autocomplete="off" novalidate>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">姓名：</label>
                  <input type="text" name="name" class="form-control" placeholder="请输入姓名" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">性别：</label>
                  <div class="input">
                    <div class="form-check d-inline-block">
                      <input value="0" checked id="cb01" class="form-check-input" type="radio" name="gender" />
                      <label for="cb01" class="form-check-label">男</label>
                    </div>
                    <div class="form-check d-inline-block">
                      <input value="1" id="cb02" class="form-check-input" type="radio" name="gender" />
                      <label for="cb02" class="form-check-label">女</label>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">年龄：</label>
                  <input type="text" name="age" class="form-control" placeholder="请输入年龄" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">组号：</label>
                  <input type="text" name="group" class="form-control" placeholder="请输入1-8组号" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">期望薪资：</label>
                  <input type="text" name="hope_salary" class="form-control" placeholder="请输入期望薪资" />
                </div>
              </div>
              <div class="col-sm-6">
                <div class="form-group">
                  <label class="input-group-label">就业薪资：</label>
                  <input type="text" name="salary" class="form-control" placeholder="请输入就业薪资" />
                </div>
              </div>
              <div class="col-sm-12">
                <div class="form-group">
                  <label class="input-group-label">籍贯：</label>
                  <div class="input pl-0">
                    <select class="form-select custom-select" name="province">
                      <option value="">--省份--</option>
                    </select>
                    <select class="form-select custom-select" name="city">
                      <option value="">--城市--</option>
                    </select>
                    <select class="form-select custom-select" name="area">
                      <option value="">--地区--</option>
                    </select>
                  </div>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" class="btn btn-blue" id="submit">确认</button>
          </div>
        </div>
      </div>
    </div>
    <script src="./bootstrap/bootstrap.min.js"></script>
    <script src="./lib/axios.js"></script>
    <script src="./lib/form-serialize.js"></script>
    <script src="./js/common.js"></script>
    <script>
      /***********************1.列表渲染******************************/
      renderList()
      async function renderList(){
        //1.1获取学生数据
        const {data:studentList} = await axios.get('/students')
        console.log('获取到的学生列表',studentList)
        //1.2渲染学生数据(生成tr，放到tbody)
        const str = studentList.map(item => {
          // return '<tr></tr>'
          return `
                <tr>
                      <td>${item.name}</td>
                      <td>${item.age}</td>
                      <td>${item.gender === 0 ? '男' : '女'}</td>
                      <td>第${item.group}组</td>
                      <td>${item.hope_salary}</td>
                      <td>${item.salary}</td>
                      <td>${item.province} ${item.city} ${item.area}</td>
                      <td>
                        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
                        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"data-id= "${item.id}"> </i></a>
                      </td>
                  </tr> 
                  `
        }).join('')
        document.querySelector('tbody').innerHTML = str

        //设置总数
        document.querySelector('.total').innerHTML = studentList.length
      }
      /********************2.删除学生**************************/
      //2.1注册单击事件（委托）
      document.querySelector('tbody').addEventListener('click',async function(e){
        //判断单击的是不是删除按钮（根据类名）
        if(e.target.classList.contains('bi-trash')){
          console.log('单击了删除按钮')
          //2.2获取学生的id
          const id = e.target.dataset.id
          console.log('学生的id',id)
          //2.3调接口
         try{
          await axios.delete(`/students/${id}`)
          //重新渲染
          renderList()
         }catch(error){
          alert('删除失败')
         }
        }else if (e.target.classList.contains('bi-pen')){
          //4.1单击编辑弹出模态框
          modal.show()
          //修改标题
          modalBox.querySelector('.modal-title').innerHTML = '编辑学员'
          //4.2获取学生的id并设置给模态框盒子
          const id = e.target.dataset.id
          // console.log(id)
          modalBox.dataset.id = id
          //4.3 获取学生的详情
          const {data:studentInfo} = await axios.get(`/students/${id}`)
          console.log('学生详情',studentInfo)
          //4.4 回显数据到表单
          //获取所有的表单项（都有name属性）
          const ipts = modalBox.querySelectorAll('[name]')
          //遍历表单项
          ipts.forEach(item => {
            // console.log('每个表单项',item)
            //获取学生详情中的数据
            const k = item.name  //name的值-->对象的属性名
            // console.log(k,studentInfo[k])
            //给表单项设置value值（排除性别）
          if(k === 'gender'){
            //设置单选按钮的checked
            if(studentInfo.gender === +item.value){
              item.checked = true
            }
          }else{
            item.value = studentInfo[k]
          }
          })
          /**********************问题：城市和区县没有回显成功*******************/
          /*******************原因：城市和区县默认情况没有option选项*******************/
          /*********************解决：获取城市数据和区县数据渲染到下拉列表，然后再设置value*******************/
          //获取当前学生所在省下面的 --> 城市数据渲染
          const {data:cArr} = await axios({
          method:'GET',
          url:'/api/city',
          params:{
            pname:studentInfo.province
          }
          })
          const cStr =  cArr.map(item => {
            return`<option value="${item}">${item}</option>`
          }).join('')
          cSelect.innerHTML = '<option value="">--城市--</option>'+ cStr
          //给城市下拉列表设置value
          cSelect.value = studentInfo.city
          //-------------------------------------------
          //获取区县的数据并渲染
          const {data:aArr}  = await axios ({
          method:'GET',
          url:'/api/area',
          params:{
            pname:studentInfo.province,
            cname:studentInfo.city
          }
          })
          console.log('获取到区县的数据',aArr)
          const aStr =  aArr.map(item => {
            return`<option value="${item}">${item}</option>`
          }).join('')
          aSelect.innerHTML = '<option value="">--区县--</option>'+ aStr
          //给区县下拉列表设置value
          aSelect.value = studentInfo.area
          }
          

      })
      /**********************3.添加学生***************************/
      //获取模态框盒子
      const modalBox = document.querySelector('#modal')
      //创建模态框对象
      const modal = new bootstrap.Modal(modalBox)
    
      //3.1点击+号 弹出模态框
      document.querySelector('#openModal').addEventListener('click',function (){
        //显示模态框
        modal.show()
        //小优化1:设置标题
        modalBox.querySelector('.modal-title').innerHTML = '添加学员'
        //小优化2：清空表单
        modalBox.querySelector('form').reset()
        //给模态框盒子设置data-id为 'add'
        modalBox.dataset.id = 'add'

      })
      //3.2省市区联动
      const pSelect = document.querySelector('[name=province]')
      const cSelect = document.querySelector('[name=city]')
      const aSelect = document.querySelector('[name=area]')
      //3.2.1 获取省份数据并渲染
      initProvince()
      async function initProvince(){
        //调接口获取省份数据
        const {data:pArr} = await axios.get('/api/province')
        console.log('获取到的省份数据',pArr)
        //渲染到省份下拉列表
        const Pstr =  pArr.map(item => {
          return`<option value="${item}">${item}</option>`
        }).join('')
        pSelect.innerHTML = '<option value="">--省份--</option>'+ Pstr
      }
      //3.2.2 监听省份的变化（省变 城市和区跟着变）
      pSelect.addEventListener('change',async function (){
        console.log('省变了-选中了',pSelect.value)
        //城市变 (获取选中省份下的所有城市,渲染到城市下拉列表)
        // axios.get('/api/city',{params:{pname:pSelect.value}})
        const {data:cArr} = await axios({
          method:'GET',
          url:'/api/city',
          params:{
            pname:pSelect.value
          }
        })
        console.log('获取到的城市数据',cArr)
        const cStr =  cArr.map(item => {
          return`<option value="${item}">${item}</option>`
        }).join('')
        cSelect.innerHTML = '<option value="">--城市--</option>'+ cStr
        //区县变（清空）
        aSelect.innerHTML = '<option value="">--区县--</option>'
      })
      //3.2.3 监听城市的变化（市变化 区跟着变）
      cSelect.addEventListener('change',async function(){
        console.log('城市变了-选中了',cSelect.value)
        //获取区县的数据并渲染
        const {data:aArr}  = await axios ({
          method:'GET',
          url:'/api/area',
          params:{
            pname:pSelect.value,
            cname:cSelect.value
          }
        })
        console.log('获取到区县的数据',aArr)
        const aStr =  aArr.map(item => {
          return`<option value="${item}">${item}</option>`
        }).join('')
        aSelect.innerHTML = '<option value="">--区县--</option>'+ aStr
      })
       
      //3.3单击"确认"完成添加
      //3.3.1给"确认"按钮注册点击事件
      document.querySelector('#submit').addEventListener('click',async function(){
        //3.3.2收集表单数据
        const form = modalBox.querySelector('form')
        const data = serialize(form,{hash:true})
        console.log(data)
        //字符串转数字
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.hope_salary = +data.hope_salary
        data.salary = +data.salary
        //3.3.3判断操作类型（添加还是编辑）
        if(modalBox.dataset.id === 'add'){
          //添加
          //3.3.4 调接口 完成添加
          try{
            await axios.post('/students',data)
            //重新渲染列表
            renderList()
            //关闭模态框
            modal.hide()
          }catch(error){
            alert('添加学生失败')
          }
        }else{
          //编辑功能
          try{
            await axios.put(`/students/${modalBox.dataset.id}`,data)
            //渲染
            renderList()
            //关闭
            modal.hide()
          }catch(error){
            alert('修改失败')
          }
        }
      })
      
      /********************4.修改学生*************************/
      //4.1单击编辑弹出模态框

    </script>
  </body>
</html>
